<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue 入门</title>
  </head>
  <body>
    <div id="app">
      {{ message }} , {{ name }}
      <hr />
      <p>{{ html }}</p>
      <p v-html="html"></p>
      <a v-bind:href="a.url" title="百度一下" :target="a.target">百度一下</a>
      <button v-bind:disabled="isButtonDisabled">按钮</button>
      <p :[attr]="value">动态绑定</p>
      <p v-if="number == 1">v-if</p>
      <p v-show="number == 1">v-show</p>
      <ul>
        <li v-for="n in names" v-html="'姓名:' + n"></li>
      </ul>

      <button v-on:click="update()">绑定事件</button>
      <button @click="update()">绑定事件</button>
      <span v-on:dblclick="sayHello()">绑定事件</span>

      <p @click="update()">
        <a href="https://www.baidu.com" @click.prevent.stop.once="sayHello()"
          >默认事件</a
        >
      </p>

      <input @keyup.ctrl.enter="update()" />
    </div>

    <hr />
    <span v-html="html">没在 vue 绑定的元素内，vue 语法不生效</span>
    <button onclick="say()">say</button>

    <script src="vue.global.js"></script>

    <script>
      // 解构
      //   const createApp = Vue.createApp;
      const { createApp } = Vue;

      // 创建 vue 应用
      const app = createApp({
        // 数据
        data() {
          return {
            message: "Hello Vue!",
            name: "kaifamiao",
            html: "<b>加粗</b>",
            a: {
              url: "https://www.google.com",
              title: "搜索",
              target: "_blank",
            },
            isButtonDisabled: "false",
            attr: "title",
            value: "abc",
            number: 10,
            names: ["张三", "李四", "王五"],
          };
        },
        methods: {
          update() {
            this.message = "vue kaifamiao";
          },
          sayHello() {
            alert("Hello");
          },
        },
      });

      // 挂载
      const vm = app.mount("#app");

      function say() {
        vm.sayHello();
      }
    </script>
  </body>
</html>
